<template>
  <div class="index">
    <div class="pl16 pr16 pt28 pb20 backgroundWhite">
      <div class="width100">
        <img class="contain width100" src="@a/img/index/banner.png" />
      </div>

      <div class="u-f u-f-jsa mt12 mb12">
        <div
          class="nav"
          v-for="(item, index) in data.navs"
          :key="index"
          @click="item.callBack()"
        >
          <img :src="item.src" alt="" />
          <div class="ft28 color525">{{ item.title }}</div>
        </div>
      </div>
      <div class="u-f u-f-jsa guideimg">
        <img src="@a/img/index/02.png" alt="" @click="$toPage('/resource')" />
        <div class="u-f u-f-fdc u-f-jsa pl12">
          <img
            class="mb8"
            src="@a/img/index/03.png"
            alt=""
            @click="$toPage('/expert')"
          />
          <img src="@a/img/index/04.png" alt="" @click="$toPage('/course')" />
        </div>
      </div>
    </div>
    <div class="mt8 ph16 pb16 backgroundWhite">
      <div class="ft32 fb u-f u-f-ac pv12">
        <div class="line mr8"></div>
        <label class="colorGrey">专题推荐</label>
      </div>
      <van-swipe :autoplay="3000" lazy-render :height="176">
        <van-swipe-item v-for="image in data.images" :key="image">
          <img class="img_tag" :src="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="mh16">
      <div class="u-f u-f-jsb mt16 mb16 pb10">
        <div class="ft32 fb u-f u-f-ac">
          <div class="line mr8"></div>
          <label class="colorGrey">活动报名</label>
        </div>
        <div class="ft24 color99" @click="$toPage('/activity')">
          查看更多
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-more"></use>
          </svg>
        </div>
      </div>
      <div class="activelist">
        <card-list
          :list="data.activityList"
          @onClick="
            (id) => {
              $toPage('/activityDetail/' + id)
            }
          "
        ></card-list>
      </div>
      <div class="u-f u-f-jsb mt16 mb16 pb10">
        <div class="ft32 fb u-f u-f-ac">
          <div class="line mr8"></div>
          <label class="colorGrey">基地预约</label>
        </div>
        <div class="ft24 color99" @click="$toPage('./baselist')">
          查看更多
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-more"></use>
          </svg>
        </div>
      </div>
      <div class="u-f u-f-wrap u-f-jsb">
        <div
          class="blockItem"
          v-for="(item, index) in data.baseList"
          :key="index"
          @click="$toPage('/baseDetail/' + item.id)"
        >
          <div class="box-img">
            <img v-default-img :src="$oss + item.cover" />
          </div>
          <div class="m8">
            <div class="ellipsis-1 ft28 fb">{{ item.name }}</div>
            <div class="ellipsis-1 ft24 mt4">
              {{ item.address }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script></script>
<script setup>
import cardList from '@/components/cardList.vue'
import { useStore } from 'vuex'
import { ref, reactive, getCurrentInstance, onBeforeMount } from 'vue'
const store = useStore()
const instance = getCurrentInstance()
const _this = instance.appContext.config.globalProperties
const data = reactive({
  navs: [
    {
      src: new URL('../../assets/img/index/nav01.png', import.meta.url).href,
      title: '我是专家',
      callBack: () => {
        _this.$utils.judgeLogin(() => {
          _this.$toPage('/addExpert')
        })
      }
    },
    {
      src: new URL('../../assets/img/index/nav02.png', import.meta.url).href,
      title: '我是基地',
      callBack: () => {
        _this.$toPage('/setbase')
      }
    },
    {
      src: new URL('../../assets/img/index/nav03.png', import.meta.url).href,
      title: '我是学校'
    }
  ],
  baseList: [],
  activityList: [],
  images: [
    'https://img.yzcdn.cn/vant/apple-1.jpg',
    'https://img.yzcdn.cn/vant/apple-2.jpg'
  ]
})

onBeforeMount(async () => {
  let activity_res = await _this.$api.activity.getActivityList({
    page: 1,
    limit: 5
  })
  if (activity_res.code == 0) {
    activity_res.data = activity_res.data.map((item) => {
      item.startDate = _this.$utils.parseTime(
        item.start_time,
        '{y}-{m}-{d} {h}:{i}'
      )
      return item
    })
    data.activityList = activity_res.data
  }
  let res = await _this.$api.base.GetBaseList({ page: 1, limit: 4 })
  if (res.code == 0) {
    data.baseList = res.data
  }
})
</script>

<style lang="scss" scoped>
.index {
  padding-bottom: 1.333333rem;
}
.nav {
  img {
    width: 1.6rem;
  }
}
.guideimg {
  height: 3.12rem;
  img {
    width: 4.453333rem;
    object-fit: contain;
  }
}

.blockItem {
  @include blockItem;
}
.img_tag {
  @include imgBox(100%, 100%);
}
</style>
